<!--
 * @Description: 数据字典选择下拉框
 * @Author: huacong
 * @Date: 2020-11-11 13:13:04
 * @LastEditTime: 2020-11-16 22:12:04
 * @LastEditors: huacong
-->
<template lang="pug">
  el-select.mr5.w(v-model="selectId" placeholder="请选择" v-bind="$attrs")
    el-option(v-for="item in options" :key="item[feildObj.key]" :value="item[feildObj.key]" :label="item[feildObj.label]")
</template>
<script>
import { dictMixin } from '@/core/mixins'

export default {
  mixins: [dictMixin],
  props: {
    initId: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: '',
      required: true
    },
    feildObj: {
      type: Object,
      default: () => {
        return {
          key: 'value',
          label: 'label'
        }
      }
    },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    options () {
      return this.dict[this.type] || []
    },
    selectId: {
      // 通过计算属性，对.sync进行转换，外部也可以直接使用initId.sync
      get () {
        return this.initId
      },
      set (val) {
        this.$emit('update:initId', val)
        this.$emit('valChange', val)
      }
    }
  },
  created () {
    const { type, params } = this
    if (!this.dict[type]) {
      this.getDict({ type: type, params })
    }
  }
}
</script>
